<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box {
            width: 800px;
            height: 100px;
            margin: auto;
            display: flex;
            justify-content: space-between;
        }

        .box div {
            width: 100px;
            height: 100px;
            border-radius: 50%;
            font-size: 30px;
            /* color: white; */
            font-weight: bold;
            text-align: center;
            line-height: 100px;
        }

        .red {
            background-color: red;
        }

        .blue {
            background-color: blue;
        }
    </style>
</head>

<body>
    <!-- 双色球
    红球：1-33之间  6个数字 不重复
    蓝球：1-16之间  1个数字 -->
    <!-- html+css：页面样式 -->
    <!-- js:动态的数字 -->

    <div class="box">
        <!-- <div class="red">1</div>
        <div class="red">1</div>
        <div class="red">1</div>
        <div class="red">1</div>
        <div class="red">1</div>
        <div class="red">1</div>
        <div class="blue">1</div> -->
    </div>

    <script>
        function randomNumber(min, max) {
            return parseInt(Math.random() * (max - min + 1) + min);
        }

        // 一.获取红球和蓝球的随机数字
        // 1.获取红球数字
        function numArr(count, min, max) {
            let arr = []; //用于存放数字
            for (let i = 0; i < count; i++) {
                let num = randomNumber(min, max);
                if (arr.includes(num)) {
                    i--;
                } else {
                    arr.push(num);
                }
            }
            return arr;
        }

        let redArr = numArr(6, 1, 33);
        // 2.获取蓝球数字

        let blueArr = numArr(1, 1, 16);


        // 二.渲染数字到页面中

        function rander(arr,className) {
            let box = document.getElementsByClassName("box")[0];
            let list = document.createDocumentFragment(); //创建文档碎片
            for (let i = 0; i < arr.length; i++) {
                // 1.创建元素节点
                let newDiv = document.createElement("div");
                // 2.创建文本元素
                let text = document.createTextNode(arr[i]);
                // 3.把文本节点插入到元素节点中
                newDiv.appendChild(text);
                // 给元素节点添加类名属性
                // newDiv.setAttribute("class",className);
                // newDiv.classList.add(className);
                newDiv.className=className;
                // 4.把新增的节点插入到文档碎片中
                list.appendChild(newDiv);
                // 注意：每一次执行appendChild方法向页面中插入元素，就会刷新一次页面
            }

            box.appendChild(list); //把文档碎片里面的内容一次性插入到页面中，页面就只会刷新一次
        }

        rander(redArr,"red");
        rander(blueArr,"blue");
    </script>


</body>

</html>